<script lang="ts">
  import { sideMenus$ } from "@store/menu";
  import { Icon } from "@component/icons";
  $: hidden = $sideMenus$.length === 0;
</script>

<sidebar class="h-full w-24" class:hidden>
  <div class="flex flow-row w-full h-full">
    <div class="flex-container flex-col w-full bar-bg-light">
      <ul class="flex-container flex-col w-full space-y-2">
        {#each $sideMenus$  as { name, path, icon, actived } (path)}
          <!-- svelte-ignore a11y-missing-attribute -->
          <li class:actived class="w-full pt-4 pb-2" >
            <a href={path} class="flex-container w-full flex-col text-xs space-y-2"><Icon name={icon} /><span>{name}</span></a>
          </li>
        {/each}
        <!-- <li><Icon name="database" />数据</li>
        <li><Icon name="cube" />模拟</li> -->
        <!-- <li><div class="rounded-full bg-gray-300 w-8 h-8" />新建</li> -->
      </ul>
      <!-- <ul class="flex flex-col space-y-4">
        <li><Icon name="share" />分享</li>
        <li></li>
      </ul> -->
    </div>
  </div>
</sidebar>

<style>
  .actived {
    background-color: #1c1b22;
  }
</style>